{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block main %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"车辆使用记录",back:1} %}
    <mu-tabs :value.sync="tab" color="amber600" indicator-color="amber600" inverse center>
        <mu-tab>查看记录</mu-tab>
        <mu-tab>添加记录</mu-tab>
    </mu-tabs>
    <div class="pad10" v-if="tab == 1">
        <mu-form ref="form" :model="en"  label-position="top" label-width="100">

            <div class="fs10 padl5 padr5">
                <mu-form-item label="项目" :rules="[rules.notNull]" prop="sid">
                    <mu-select v-model="en.sid" full-width>
                        <mu-option v-for="option,index in sites"
                                   :key="index" :label="option" :value="index"></mu-option>
                    </mu-select>
                </mu-form-item>
                <mu-form-item label="车辆" :rules="[rules.notNull]" prop="cid">
                    <mu-select v-model="en.cid" full-width>
                        <mu-option v-for="option,index in cars"
                                   :key="index" :label="option" :value="index"></mu-option>
                    </mu-select>
                </mu-form-item>
                <mu-form-item label="出车公里数" :rules="[rules.isNum]" prop="startNum">
                    <mu-text-field v-model="en.startNum" type="number"></mu-text-field>
                </mu-form-item>
                <mu-form-item label="回车公里数" :rules="[rules.isNum]" prop="endNum">
                    <mu-text-field v-model="en.endNum"></mu-text-field>
                </mu-form-item>
                <mu-form-item label="备注说明" :rules="[rules.notNull]" prop="note">
                    <mu-text-field v-model="en.note"   multi-line :rows="3" :rows-max="6"></mu-text-field>
                </mu-form-item>

                <div class="fs10 padl5 padr5 flr">
                    <mu-form-item label="附件" :rules="[rules.notNull]" prop="attachment">
                        <div class="ofh">
                            <div class="flex-r flex-nowrap">
                                <mu-paper class="picCommonSize pos-r mar3" :z-depth="1"  v-for="tile, index in pics">
                                    <img class="picCommonSize" :src="tile">
                                    <div class="pos-a w100 r0 l0 b-3 flrc op6">
                                        <mu-button fab small color="black" @click="move(index,-1)">
                                            <mu-icon  value="arrow_back"></mu-icon>
                                        </mu-button>
                                        <mu-button fab small color="black" @click="move(index,1)">
                                            <mu-icon  value="arrow_forward"></mu-icon>
                                        </mu-button>
                                        <mu-button fab small color="black" @click="del(index)">
                                            <mu-icon  value="close"></mu-icon>
                                        </mu-button>
                                    </div>
                                </mu-paper>
                            </div>

                            <div class="">
                                <mu-button color="success" @click="selectPic()">选择图片</mu-button>
                            </div>
                        </div>
                    </mu-form-item>
                </div>

                <div class="fs8 c11 pad5 mart20">
                    <mu-button large full-width round color="primary" @click="submit()">保存提交</mu-button>
                </div>

            </div>
        </mu-form>
    </div>
    <div class="pad10" v-if="tab == 0">
        <div class="fs8 c11">
            <div class="bcf round1 mart5  bdc12 shadow3" v-for="item in list">
                <div class="flrc padl5 padr5 c11">
                    <div class="">车牌号：</div>
                    <div class="flex1">[[item.Car_number]]</div>
                    <div class="c2">
                        <mu-button icon @click="showPic(item.CarLog_attachment)">
                            <mu-icon value="photo_size_select_actual"></mu-icon>
                        </mu-button>
                    </div>
                </div>
                <div class="flrc pad5">
                    <div class="">出车公里数：</div>
                    <div class="flex1">[[item.CarLog_start_Num]]</div>
                    <div class="">回车公里数：</div>
                    <div class="flex1">[[item.CarLog_end_Num]]</div>
                </div>
                {#<div class="flrc pad5">#}
                    {#<div class="flex1">370515112589</div>#}
                    {#<div class="flex1">370515112589</div>#}
                    {#<div class="flex1">2019-01-08</div>#}
                {#</div>#}
                <div class="bdtso pad5 flrc bcf">
                    <div class="">事由：</div>
                    <div class="flex1">[[item.Site_name]]</div>
                </div>
                <div class="bdtso pad5 flrc bcf">
                    <div class="">备注：</div>
                    <div class="flex1">[[item.CarLog_note]]</div>
                </div>
                <mu-expansion-panel>
                    <div slot="header">附件</div>
                    <img :src="pic" class="w100" alt="" v-for="pic in item.CarLog_attachment">
                    {#Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.#}
                    {#<mu-button slot="action" flat>Cancel</mu-button>#}
                    {#<mu-button slot="action" flat color="primary">Save</mu-button>#}
                </mu-expansion-panel>
            </div>
        </div>
    </div>

    <mu-dialog width="90vw" dialog-class="w100 pad3"  scrollable  :open.sync="open">
        {#<mu-appbar color="" title="查看附件">#}

            {#<mu-button slot="right" icon  @click="closeFullscreenDialog">#}
                {#Done#}
            {#</mu-button>#}
        {#</mu-appbar>#}
        <div style="" class="pos-r">
            <div  class="pos-a r-9 t-9">
                <mu-button icon @click="closeFullscreenDialog">
                    <mu-icon value="close"></mu-icon>
                </mu-button>
            </div>
            <img :src="item" class="w100" alt="" v-for="item in atta">
        </div>
    </mu-dialog>
    {#<mu-popover cover :open="open">#}
        {#<div v-for="item in atta">#}
            {#1<mu-list>#}
                {#<mu-list-item button>#}
                    {#<mu-list-item-title>Refresh</mu-list-item-title>#}
                {#</mu-list-item>#}
                {#<mu-list-item button>#}
                    {#<mu-list-item-title>Send feedback</mu-list-item-title>#}
                {#</mu-list-item>#}
                {#<mu-list-item button>#}
                    {#<mu-list-item-title>Settings</mu-list-item-title>#}
                {#</mu-list-item>#}
                {#<mu-list-item button>#}
                    {#<mu-list-item-title>Help</mu-list-item-title>#}
                {#</mu-list-item>#}
                {#<mu-list-item button>#}
                    {#<mu-list-item-title>Sign out</mu-list-item-title>#}
                {#</mu-list-item>#}
            {#</mu-list>#}
            {#<img :src="item" class="picCommonSize" alt="">#}
        {#</div>#}
    {#</mu-popover>#}

{% endblock %}

    {% block myJs %}

        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/crypto/crypto.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/hmac/hmac.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/sha1/sha1.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/base64.js"></script>
        {#<script type="text/javascript" src="{{ root }}/assets/oss/lib/plupload-2.1.2/js/plupload.full.min.js"></script>#}
        <script type="text/javascript" src="{{ root }}/assets/oss/uploadMy.js{{ rnd }}"></script>
    {% endblock %}
